import React from "react";
import { Form, Input, Select, Button, Table, } from "antd";

const Order = () => {
    const { form } = Form.useForm(),
        { Option } = Select,
        columns = [{
            title: "序号",
            dataIndex: "num",
            key: "num",
            align: 'center'
        },
        {
            title: "编号",
            dataIndex: "number",
            key: "number",
            align: 'center'
        },
        {
            title: "用户名",
            dataIndex: "name",
            key: "name",
            align: 'center'
        },
        {
            title: "手机号",
            key: "phone",
            dataIndex: "phone",
            align: 'center'
        },
        {
            title: "类型",
            dataIndex: "type",
            key: "type",
            align: 'center'
        },
        {
            title: "支付金额",
            dataIndex: "price",
            key: "price",
            align: 'center'
        },

        {
            title: "支付时间",
            dataIndex: "date",
            key: "date",
            align: 'center'
        },
        {
            title: "操作",
            key: "action",
            align: 'center',
            render: (text, record) => (
                <Button type='text'>删除</Button>
            ),
        },],
        data = [{
            key: '1',
            num: '1',
            number: '1002202',
            name: '王强',
            phone: '1388888888',
            type: 1,
            price: 10,
            date: new Date().toLocaleDateString(),
        }, {
            key: '2',
            num: '2',
            number: '1002203',
            name: '王强',
            phone: '1388888888',
            type: 2,
            price: 10,
            date: new Date().toLocaleDateString(),
        }, {
            key: '3',
            num: '3',
            number: '1002204',
            name: '王强',
            phone: '1388888888',
            type: 3,
            price: 10,
            date: new Date().toLocaleDateString(),
        }, {
            key: '4',
            num: '4',
            number: '1002205',
            name: '王强',
            phone: '1388888888',
            type: 4,
            price: 10,
            date: new Date().toLocaleDateString(),
        },]

    const onGenderChange = () => { };
    return (
        <div>
            <p className="header_title">订单管理</p>
            <div className="order_main">
                <Form layout="inline" form={form}>

                    <Form.Item label="订单类型：">
                        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
                            <Option value="male">请选择</Option>
                            <Option value="female">二手房出租</Option>
                            <Option value="other">有房出租</Option>
                            <Option value="female">我想买个房</Option>
                            <Option value="other">我想租个房</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="搜索：">
                        <Input placeholder="请输入手机号/用户名/订单号" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary'>查询</Button>
                    </Form.Item>
                </Form>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Order;
